import { Graph, Node } from "@antv/x6";

// #region 初始化图形
const ports = {
  groups: {
    top: {
      position: "top",
      attrs: {
        circle: {
          r: 3,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    right: {
      position: "right",
      attrs: {
        circle: {
          r: 3,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    bottom: {
      position: "bottom",
      attrs: {
        circle: {
          r: 3,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    },
    left: {
      position: "left",
      attrs: {
        circle: {
          r: 3,
          magnet: true,
          stroke: "#5F95FF",
          strokeWidth: 1,
          fill: "#fff",
          style: {
            visibility: "hidden"
          }
        }
      }
    }
  },
  items: [
    {
      group: "top"
    },
    {
      group: "right"
    },
    {
      group: "bottom"
    },
    {
      group: "left"
    }
  ]
};

Graph.registerNode(
  "custom-rect",
  {
    inherit: "rect",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF"
      },
      text: {
        fontSize: 12,
        fill: "#262626"
      }
    },
    ports: { ...ports },
    tools: ["node-editor"]
  },
  true
);

export const CustomPolygon = Graph.registerNode(
  "custom-polygon",
  {
    inherit: "polygon",
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF"
      },
      text: {
        fontSize: 12,
        fill: "#262626"
      }
    },
    ports: {
      ...ports,
      items: [
        {
          group: "top"
        },
        {
          group: "bottom"
        }
      ]
    },
    tools: ["node-editor"]
  },
  true
);

Graph.registerNode(
  "custom-circle",
  {
    inherit: "circle",
    width: 45,
    height: 45,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: "#5F95FF",
        fill: "#EFF4FF"
      },
      text: {
        fontSize: 12,
        fill: "#262626"
      }
    },
    ports: { ...ports },
    tools: ["node-editor"]
  },
  true
);

Graph.registerNode(
  "custom-image",
  {
    inherit: "rect",
    width: 52,
    height: 52,
    markup: [
      {
        tagName: "rect",
        selector: "body"
      },
      {
        tagName: "image",
        selector: "image"
      },
      {
        tagName: "text",
        selector: "label"
      }
    ],
    attrs: {
      body: {
        stroke: "#5F95FF",
        fill: "#5F95FF"
      },
      image: {
        // 使用相对宽度和高度，使图片随节点大小变化
        width: 26,
        height: 26,
        refX: 13,
        refY: 16,
        // 确保图片可以正确缩放
        preserveAspectRatio: "xMidYMid meet"
      },
      label: {
        refX: 3,
        refY: 2,
        textAnchor: "left",
        textVerticalAnchor: "top",
        fontSize: 12,
        fill: "#fff"
      }
    },
    ports: { ...ports },
    tools: ["node-editor"]
  },
  true
);

export class NodeGroup extends Node {
  private collapsed = true;

  protected postprocess() {
    this.toggleCollapse(true);
  }

  isCollapsed() {
    return this.collapsed;
  }

  toggleCollapse(collapsed?: boolean) {
    const target = collapsed == null ? !this.collapsed : collapsed;
    if (target) {
      this.attr("buttonSign", { d: "M 1 5 9 5 M 5 1 5 9" });
      this.resize(200, 40);
    } else {
      this.attr("buttonSign", { d: "M 2 5 8 5" });
      this.resize(240, 240);
    }
    this.collapsed = target;
  }
}

NodeGroup.config({
  shape: "rect",
  resizable: true,
  markup: [
    {
      tagName: "rect",
      selector: "body"
    },
    {
      tagName: "image",
      selector: "image"
    },
    {
      tagName: "text",
      selector: "text"
    },
    {
      tagName: "g",
      selector: "buttonGroup",
      children: [
        {
          tagName: "rect",
          selector: "button",
          attrs: {
            "pointer-events": "visiblePainted"
          }
        },
        {
          tagName: "path",
          selector: "buttonSign",
          attrs: {
            fill: "none",
            "pointer-events": "none"
          }
        }
      ]
    }
  ],
  attrs: {
    body: {
      refWidth: "100%",
      refHeight: "100%",
      strokeWidth: 1,
      fill: "rgba(95,149,255,0.05)",
      stroke: "#5F95FF"
    },
    image: {
      "xlink:href": "https://gw.alipayobjects.com/mdn/rms_0b51a4/afts/img/A*X4e0TrDsEiIAAAAAAAAAAAAAARQnAQ",
      width: 16,
      height: 16,
      x: 8,
      y: 12
    },
    text: {
      fontSize: 12,
      fill: "rgba(0,0,0,0.85)",
      refX: 30,
      refY: 15
    },
    buttonGroup: {
      refX: "100%",
      refX2: -25,
      refY: 13
    },
    button: {
      height: 14,
      width: 16,
      rx: 2,
      ry: 2,
      fill: "#f5f5f5",
      stroke: "#ccc",
      cursor: "pointer",
      event: "node:collapse"
    },
    buttonSign: {
      refX: 3,
      refY: 2,
      stroke: "#808080"
    }
  }
});

Graph.registerNode("groupNode", NodeGroup);
